<template>
    <div>
        <div style="width: auto;height: 400px" ref="cloud" @click="eConsole"  ></div>
    </div>
</template>

<script>

    import * as echarts from 'echarts';
    import 'echarts-wordcloud';
    export default {
        name: "Cloud",
        props:{
            cloudInewsData:Array,
            inewsCloudIndex:Number
        },
        data() {
            return {
                data:[]
            }
        }, //图表实例
        mounted() {
            // this.data = this.cloudInewsData
            this.echartsInit()
        },
        created() {


            var data = this.cloudInewsData
            data.map(m => {
                let textSyyle = {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                }
                m.textStyle = textSyyle
                // console.log(m)
                this.data.push(m)
            })
        },
        beforeUpdate() {
        },
        methods: {
            createRandomItemStyle(){
              return 'rgb(' + [
                            Math.round(Math.random()*180),
                            Math.round(Math.random()*180),
                            Math.round(Math.random()*360)
                        ].join(',')+')'
            },
            createRandomValue(){
                return Math.round(Math.random()*1000)
            },
            echartsInit() {
                echarts.init(this.$refs.cloud).setOption({
                    toolbox: {
                        feature: {
                            dataView: { show: true, title: '数据视图',readOnly: true
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    tooltip: {//提示框组件
                        trigger: 'item',
                        // show: true,
                        // borderWidth: 0,
                        // backgroundColor: 'rgba(0,0,0,0.5)',
                        // textStyle: {
                        //     color: "#fff",
                        // },
                        formatter: (params) => {
                            return `${params.data.name}: ${params.data.value}`
                        }
                    },
                    series: [{
                        type: 'wordCloud',
                        // shape: 'circle',
                        // left: 'center',
                        // top: 'center',
                        // width: '70%',
                        // height: '80%',
                        // right: null,
                        // bottom: null,
                        sizeRange: [12, 60],
                        rotationRange: [-90, 90],
                        rotationStep: 45,
                        gridSize: 8,
                        // imageShape:'http://c.hiphotos.baidu.com/zhidao/pic/item/d52a2834349b033bc91c09cf16ce36d3d539bd0b.jpg',
                        drawOutOfBound: false,
                        layoutAnimation: true,
                        textStyle: {
                            color: this.createRandomItemStyle(),
                        },
                        emphasis: {
                            // focus: 'self',

                            textStyle: {
                                normal:{
                                    textShadowBlur: 5,
                                    textShadowColor: this.createRandomItemStyle()
                                }
                                // color:"red",

                            },
                        },

                        // data 数组格式, 必须有name和value属性,
                        data: this.data
                    }]
                })
            },
            eConsole(e){
                console.log(e)
            }
        }
    }
</script>

<style scoped>

</style>